<template>
  <div id="app">

    <!--路由容器--->
    <transition name="app" mode="out-in">
      <router-view></router-view>
    </transition>
    <Tabbar v-show="isTabbarShow"></Tabbar>
  </div>
</template>
<script>
  import Tabbar from "@/components/Tabbar"
  import {mapState} from 'vuex'
export default {
  methods:{
  },
  components:{
    Tabbar
  },
  computed:{
    ...mapState('tabbar',["isTabbarShow"])
  }
}
</script>

<style lang="scss" scoped>
.app-enter-active{
  animation: move 1s;

}
.app-leave-active{
  animation: move 1s reverse;

}
@keyframes move{
  0%{
    opacity: 0;
    transform: translateY(200px);
  }
  100%{
    opacity: 1;
     transform: translateY(0);
  }
}
</style>
